<template>
  <div id="app">
    <ComponentPH/>

    <div class="head"style="width: 100%; height: 120px;">
<!--      <el-image-->
<!--        style="width: 100%; height: 120px;background-color:#2c3e50 "-->
<!--        :src="url"-->
<!--        :fit="fit"></el-image>-->
      <el-carousel  height="120px" >
        <el-carousel-item v-for="(imgSrc, index) in imgSources" :key="index">
          <img :src="imgSrc" alt="轮播图片" style="width: 100%; height: 100%; object-fit: cover;"></el-carousel-item>
      </el-carousel>
    </div>
    <router-view/>
  </div>
</template>

<script>
import router from './router';
import PageHead from './components/PageHead.vue';
import login from './components/Login.vue';
import Register from  './components/Register.vue';
export default {
  name: 'App',
  router,
  components: {
    router,
    ComponentPH: PageHead,
    ComponentL: login,
    ComponentR: Register
  },
    data(){
      return{
        imgSources: [
          require('@/assets/zjsu.png'),
          require('@/assets/zjsu2.jpg')
        ],
        url: require('@/assets/img_2.png')
    }
  }
}

</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  background-color: #fff7e6;
  width: 100%;
  height:960px;
}
#app a{
  text-decoration: none;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {

  background-color: #807567;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #dcc19b;
}
</style>
